<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-10 15:11
  PageName：g_Font_Variant.html
  Function：字体样式 - 字体大小写
  URL：http://localhost:8080/e1_webpage_FontStyle/g_Font_Variant.html
-->

<head>
    <meta charset="UTF-8">
    <title>字体样式 - 字体大小写</title>

    <style type="text/css">
        /* 小型大写字母样式类 */
        .small-caps {
            font-variant: small-caps;
        }

        /* 将每一个单词的第一个字母转换成大写，其余无转换发生 */
        .capitalize {
            text-transform: capitalize;
        }

        /* 把所有字母都转换成大写 */
        .uppercase {
            text-transform: uppercase;
        }

        /* 把所有字母都转换成小写 */
        .lowercase {
            text-transform: lowercase;
        }
    </style>
</head>

<body>
<p class="small-caps">font-variant</p>
<p class="capitalize">text-transform:capitalize</p>
<p class="uppercase">text-transform:uppercase</p>
<p class="lowercase">text-transform:lowercase</p>
</body>
</html>